<template>
  <div class="login-wrap">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 20px">
        <van-space direction="vertical" fill>
          <van-button
            class="btn"
            round
            block
            type="primary"
            native-type="submit"
          >
            登入
          </van-button>
          <van-button
            class="btn"
            round
            block
            type="primary"
            native-type="submit"
          >
            注册
          </van-button>
        </van-space>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { getLoginHttp } from "../../request/api/user"

const username = ref("")
const password = ref("")
const $router = useRouter()
const onSubmit = async () => {
  // 1.获取到输入框绑定的用户名和密码
  if (username && password) {
    // 2.向后台发送 请求 并携带用户名和密码
    const { data } = await getLoginHttp(username.value, password.value)
    // 3.判断后台返回的结果，如果成功根据用户权限，跳转不同的页面，如果失败，弹出提示“用户名和密码错误”
    if (data.code === 0) {
      const type = data.result.user_type
      const user_id = data.result.user_id
      console.log(user_id)

      $router.push(`/mobilehome?id=${user_id}&name=${username.value}`)

      // 修改登入状态

      ElMessage({
        message: "登陆成功！",
        type: "success",
      })
    } else {
      ElMessage({
        message: "用户名或密码错误！",
        type: "warning",
      })
    }
  } else {
    ElMessage({
      message: "请输入用户名或密码！",
      type: "warning",
    })
  }
}
</script>

<style scoped>
.login-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-image: url("../../images/guanggu.JPG");
  background-size: 100% 100%;
  opacity: 0.9;
}
</style>
